<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>任务管理</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/all.css" />
		<link rel="stylesheet" href="css/received-task.css" />
	</head>

	<body>
		<style type="text/css">
			.task {
				position: fixed;
				top: 1.2rem;
				height: 1.08rem;
				background: #ffffff;
				width: 100%;
				border-bottom: .2rem solid #eee;
				z-index: 4;
			}
			
			.received-task {
				/*width: 100%;
		    position: absolute;
		    top: 2.2rem;
		    padding-top: 0rem;
		    background-color: #fff;
		    z-index: 1;*/
				position: absolute;
				top: 2.3rem;
				bottom: 0rem;
				background: #FFFFFF;
				overflow-y: scroll;
			}
		</style>
		<div>
			<div class="heads">
				<span onclick="location.href='./personage.html'"><img src="img/zuojiantou.png" alt="" class="arrows"></span>
				<h1 class="titles">任务管理</h1>
			</div>	
			<div class="task">
					<div class="tasts">
						<a href="sent-task.html"><span class="sent">已发任务</span></a>
						<span class="sents">已接任务</span>
					</div>
				</div>
			<div class="received-task">
			
				<a href="">
					<div class="content flex">
						<div class="tupian">
							<img class="tupians" src="img/501072207.png" alt="">
						</div>
						<div class="character">
							<p class="characters">苹果公司推出经过全新设计的系列笔记本电脑还能记得吃不能回复啊想吃撒才能尽快送你吃藕</p>
						</div>
					</div>
				</a>
				<a href="">
					<div class="content flex">
						<div class="tupian">
							<img class="tupians" src="img/501072207.png" alt="">
						</div>
						<div class="character">
							<p class="characters">苹果公司推出经过全新设计的系列笔记本电脑还能记得吃不能回复啊想吃撒才能尽快送你吃藕</p>
						</div>
					</div>
				</a>
				<a href="">
					<div class="content flex">
						<div class="tupian">
							<img class="tupians" src="img/501072207.png" alt="">
						</div>
						<div class="character">
							<p class="characters">苹果公司推出经过全新设计的系列笔记本电脑还能记得吃不能回复啊想吃撒才能尽快送你吃藕</p>
						</div>
					</div>
				</a>
				<a href="">
					<div class="content flex">
						<div class="tupian">
							<img class="tupians" src="img/501072207.png" alt="">
						</div>
						<div class="character">
							<p class="characters">苹果公司推出经过全新设计的系列笔记本电脑还能记得吃不能回复啊想吃撒才能尽快送你吃藕</p>
						</div>
					</div>
				</a>
				<div class="without">
					<p>没有更多内容了</p>
				</div>
			</div>
		</div>
		<script src="js/x_rem.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/secondLevel.js"></script>
		<script src="js/all.js"></script>
		<script type="text/javascript">
			//上拉加载
			//_loadIndex 为请求的页数    _loadState为请求状态  0 可以请求  1 正在请求  2 请求结束
			var _loadIndex = 1,
				_loadState = 0;

			//上拉加载调用js
			loadmore('.received-task', function(data) {
				$.each(data.data.list, function(key, val) {
					$('#wrapper ul').append();
				});
			}, function() {});

			function loadmore(element, successFn) {
				$(element).on("scroll", function() {
					//当前可视容器高度
					var _elementHeight = $(element).outerHeight(),
						//当前滚动区域高度
						_elementChildHeight = $(element).children().outerHeight(),
						//滚动条高度
						_elementScroll = $(element).scrollTop();
					//滚动区域 - 滚动条高度 > 可视高度  就是还可以滚动  表示没有滚动到底部  否则就到了底部
					if(_elementChildHeight - _elementScroll - 10 > _elementHeight) {
						//console.log('没到底')
					} else {
						//console.log('到底了')
						//当状态为0 的时候进行加载，防止重复加载
						if(_loadState == 0) {
							//状态更新为1
							_loadState = 1;
							//增加页数
							_loadIndex += 1;
							//添加正在加载loadding
							$(element).append('<p class="nowLoad">加载中...</p>');
							//请求当前页数ajax
							ajaxLoad(_loadIndex);
						}
					}
				});

			};

			var html = "";
			//ajax请求
			function ajaxLoad(_loadIndex) {
				//更新发向服务器的数据，添加页数key值

				$.ajax({
					type: "post",
					url: Url + "/browseTask/findPageMyBrowseRecord",
					xhrFields: {
						withCredentials: true
					},
					data: {
						page: _loadIndex,
						rows: 8
					},
					success: ((data) => {
					 
						if(data.message == "") {
							_loadState = 1;

							$(".nowLoad").text("我也是有底线的。。。");
						} else {
							_loadState = 0;
						}

						for(let i = 0; i < data.message.length; i++) {
							html += `
								<a href="advertising-details.html?id=${data.message[i].browseRecord.browseTaskId.browseTaskId}">
									<div class="content flex">
										<div class="tupian">
											<img class="tupians" src="${data.message[i].browseRecord.browseTaskId.picture}" alt="">
										</div>
										<div class="character">
											<p class="characters">${data.message[i].browseRecord.browseTaskId.title}</p>
 										</div>
									</div>
								</a>		
							`
						}
						$(".received-task").html(html);

					}),
					error: ((err) => {
						console.log(err);
					})
				});

			}

			ajaxLoad(_loadIndex);
		</script>
	</body>

</html>